<template>
  <div class="scenic-guide-order-detail">
    <v-header ref="header" title="订单详情"></v-header>
    <div class="main" ref="main">
      <div class="status">
        <p :class="{error: orderInfo.orderStatus === 7}">{{orderInfo.orderStatusStr}}</p>
        <p :class="{error: orderInfo.orderStatus === 7}" class="message" v-if="orderInfo.orderStatus === 7 && orderInfo.message">({{orderInfo.message}})</p>
        <p class="status-tip">订单号：{{orderInfo.outTradeNo}}</p>
      </div>
      <div class="tips" v-show="isShowTemp">
        <p class="tip-title">订购提示</p>
        <div class="tip-content">
          <label>提示</label>
          <p>下单成功后导游会电话联系， 请保持电话畅通</p>
        </div>
        <!-- <div class="tip-content" v-if="orderInfo.orderGoodsList && orderInfo.orderGoodsList.length > 0">
          <label>游玩日期</label>
          <p><span style="color: red;">{{orderInfo.orderGoodsList[0].effectiveDate}}</span>请不要错过游玩时间哦</p>
        </div> -->
        <div class="tip-content">
          <label>报销凭证</label>
          <p>导游导购不支持开具发票</p>
        </div>
      </div>
      <div class="qr-code" v-if="orderInfo.qrcode">
        <div class="img-wrapper" :class="{layer: orderInfo.orderStatus === 3 || (orderInfo.orderStatus !== 1 && orderInfo.orderStatus !== 3 && orderInfo.orderStatus !== 6)}">
          <img :src="'data:image/png;base64,' + orderInfo.qrcode" width="180px" height="180px"/>
          <p v-if="orderInfo.orderStatus !== 1 && orderInfo.orderStatus !== 3 && orderInfo.orderStatus !== 6" class="disabled qrcode-status">已失效</p>
          <p v-if="orderInfo.orderStatus === 3" class="complete qrcode-status">已完成</p>
        </div>
        <p>在门闸机，扫一扫这个二维码~</p>
      </div>
      <div class="box">
        <p class="title">
          在线支付
          <span class="price">￥{{orderInfo.totalAmount}}</span>
        </p>
        <div class="scenic" v-if="orderInfo.orderGoodsList && orderInfo.orderGoodsList.length > 0">
          <div class="thumb" v-lazy:backgroundImage="orderInfo.headUrl"></div>
          <div class="info">
            <p class="name">{{orderInfo.goodsName}}</p>
            <p class="price">单价： <span>￥</span><span class="num">{{orderInfo.orderGoodsList[0].goodsPrice}}</span></p>
          </div>
          <div class="number">
            <p>X<span>{{orderInfo.orderGoodsList.length}}</span></p>
          </div>
        </div>
        <div v-show="isShowTemp">
          <div class="guideInfoWrapper">
            <div>导游姓名：{{tourNameTemp}}</div>
            <div @click="handleClickMenu(guideInfo.phoneNum)">导游电话：{{guideInfo.phoneNum}}</div>
          </div>
          <div style="margin-top: 15px">
            导游描述： {{descTemp}}
          </div>
        </div>
        <div v-show="!isShowTemp">
          <div class="guideInfoWrapper">
            <div>客户姓名：{{customerInfo.realName}}</div>
            <div @click="handleClickMenu(customerInfo.phoneNum)">客户电话：{{customerInfo.phoneNum}}</div>
          </div>
          <div style="margin-top: 15px">
            客户描述：{{customerInfo.signature}}
          </div>
        </div>
        <ul class="btns" v-show="isShowTemp">
          <li v-if="orderInfo.orderStatus === 0" class="active" @click.stop="toPay">去付款</li>
          <!-- <li v-else @click.stop="toComment" :class="{disabled: orderInfo.orderStatus !== 3 || orderInfo.commentStatus !== 0}">{{orderInfo.commentStatus === 1 ? '已评价' : '去评价'}}</li> -->
          <li @click="cancelOrder" :class="{disabled: orderInfo.orderStatus !== 0}">取消订单</li>
          <li @click="toOrderAgain">再次预定</li>
          <li @click="toHome">返回首页</li>
        </ul>
      </div>
      <div class="box" v-if="hotelList.length > 0">
        <p class="title">附近酒店</p>
        <ul class="hotel-list" slot="content">
          <router-link v-for="item in hotelList" :key="item.id" :to="`/hotel/${item.id}`" tag="li">
            <div v-lazy:backgroundImage="item.thumbnailId" class="bg"></div>
            <p class="name">{{item.name}}</p>
            <p class="price">￥<span style="font-size: 15px; margin-right: 4px;">{{item.floorPrice}}</span></p>
          </router-link>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import VHeader from '@/components/v-header/v-header'
import { TransferDom, Popup } from 'vux'
import { mapGetters } from 'vuex'
import axios from '@/api/axiosApi'
import { isIphoneX } from '@/assets/js/brower'
import nativeBridge from '@/assets/js/nativeBridge'

const ORDER_STATUS = [
  {
    value: 0,
    label: '待支付'
  },
  {
    value: 1,
    label: '已支付'
  },
  {
    value: 2,
    label: '取消订单'
  },
  {
    value: 3,
    label: '订单完成'
  },
  {
    value: 4,
    label: '发起退票'
  },
  {
    value: 5,
    label: '退票完成'
  },
  {
    value: 6,
    label: '退票失败'
  },
  {
    value: 7,
    label: '下单失败'
  }
]
export default {
  name: 'ScenicOrderDetail',
  data() {
    return {
      descTemp: '',
      tourNameTemp: '',
      orderInfo: {},
      hotelList: [],
      isShowTemp: true,
      guideInfo: {},
      customerInfo: {}
    }
  },
  directives: {
    TransferDom
  },
  components: {
    VHeader,
    Popup
  },
  created() {
    this.paddingBottom = 0
    if (isIphoneX()) {
      this.paddingBottom = 34
    }
    if (sessionStorage.getItem('goodsTypeTemp') === '203') {
      this.isShowTemp = false
    }
    this._getOrderDetail()
  },
  mounted() {
    this.$refs.main.style.height = window.innerHeight - this.$refs.header.$el.offsetHeight + 'px'
  },
  computed: {
    ...mapGetters(['selectedGuide'])
  },
  methods: {
    handleClickMenu (value) {
      window.location.href = 'tel://' + value
    },
    _getOrderDetail() {
      axios.get(this, '/v1/order/' + this.$route.params.tradeNo, null, (data) => {
        const status = ORDER_STATUS.find(o => o.value === data.orderStatus)
        if (status) {
          data.orderStatusStr = status.label
        }
        this.orderInfo = data
        // 获取导游详细信息
        axios.get(this, '/v1/tourismGuideOrder/getTourInfoByUserId?userId=' + this.orderInfo.guiderId, null, (data) => {
          this.guideInfo = data
          this.tourNameTemp = data.tourName
          this.descTemp = data.desc
        })
        // 获取客户信息
        axios.get(this, '/v1/userInfo/' + this.orderInfo.buyerId, null, (data) => {
          this.customerInfo = data
        })
        // this._getHotelList(data.orderGoodsList[0].longitude, data.orderGoodsList[0].latitude)
      })
    },
    _getHotelList(longitude, latitude) {
      axios.get(this, '/v1/nearbyHotel', {
        hotelNum: 3,
        longitude: longitude,
        latitude: latitude,
        distance: 30000
      }, (data) => {
        this.hotelList = data
      })
    },
    toPay() {
      nativeBridge.alipay(this.$route.params.tradeNo, ({arg, msg}) => {
        if (arg === 9000) {
          this.$router.push('/orderList?type=102')
        }
        this.$vux.toast.text(msg, 'middle')
      })
    },
    toComment() {
      if (this.orderInfo == null || this.orderInfo.id == null) {
        return
      }
      if (this.orderInfo.orderStatus !== 3) {
        this.$vux.toast.text('需要完成订单过后才可以评论', 'middle')
        return
      }
      // 评论页面
      sessionStorage.setItem('outTradeNo', this.$route.params.tradeNo)
      sessionStorage.setItem('goodsImageEvalution', this.orderInfo.orderGoodsList[0].goodsImage)
      sessionStorage.setItem('goodsType', this.orderInfo.goodsType)
      this.$router.replace('/user/evalution/' + this.orderInfo.productId)
    },
    cancelOrder() {
      // 取消订单
      if (this.orderInfo.orderStatus !== 0) {
        this.$vux.toast.text(`该订单状态为“${this.orderInfo.orderStatusStr}”，不可取消`, 'middle')
        return
      }
      const _self = this
      this.$vux.confirm.show({
        title: '提示',
        content: '确定要取消该订单吗？',
        onConfirm () {
          axios.put(_self, `/v1/cancelOrder/${_self.$route.params.tradeNo}`, null, () => {
            _self.$vux.toast.text('取消订单成功', 'middle')
            _self._getOrderDetail()
          })
        }
      })
    },
    toOrderAgain() {
      // 再次下单
      this.$router.push('/scenicGuide')
    },
    toHome() {
      this.$router.replace('/')
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/variable.styl'
@import '~@/assets/css/mixins.styl'

.scenic-guide-order-detail
  position fixed
  top 0
  left 0
  right 0
  bottom 0
  background-color $color-background
  z-index 100
.box
  background #ffffff
  margin-top 16px
  padding 20px 16px
.title
  color #333
  padding-bottom 20px
  line-height 1
  font-size 20px
  .more
    float right
  i
    font-size 24px
    color #999
    margin-left 8px
  .price
    color $color-theme
    font-size 21px
    margin-left 8px
.main
  overflow-x hidden
  overflow-y auto
  -webkit-overflow-scrolling touch
  -webkit-box-sizing border-box
.status
  font-size 28px
  color #fff
  line-height 1
  padding-top 16px
  padding-bottom 106px
  padding-left 16px
  background $color-theme
  .message
    font-size 13px
    margin-left 6px
    line-height 1.4
    margin-top 12px
    padding-right 16px
  .status-tip
    font-size 15px
    margin-top 16px
  .error
    color #d65656
.qr-code
  margin 20px 0px
  text-align center
  p
    font-size 14px
    color #666
    margin-top 4px
    line-height 1
  .img-wrapper
    position relative
    overflow hidden
    width fit-content
    display inline-block
    .qrcode-status
      font-size 16px
      margin-top 0
      font-weight bold
      position absolute
      top 16px
      right 0
      transform rotateZ(45deg)
      z-index 10
    .disabled
      color #f44949
    .complete
      color $color-theme
  .layer
    &:after
      content ''
      display block
      position absolute
      top -55px
      right -55px
      height 110px
      width 110px
      background #d0d0d0
      transform rotateZ(45deg)
.tips
  background #fff
  border-radius 3px
  margin 0 16px
  overflow hidden
  padding 16px
  margin-top -84px
  line-height 1.6
  .tip-title
    font-size 17px
    color #333
    margin-bottom 16px
    line-height 1
  .tip-content
    display flex
    font-size 15px
    color #333
    margin-bottom 8px
    &:last-child
      margin-bottom 0
    label
      color #999
      margin-right 16px
      min-width 62px
.scenic
  display flex
  align-items center
  line-height 1
  .thumb
    width 94px
    height 70px
    background-size cover
    background-repeat no-repeat
    background-position center
    margin-right 8px
    border-radius 3px
  .info
    width calc(100% - 150px)
    .name
      height 45px
      font-size 16px
      color #333
      margin-bottom 6px
      line-height 1.4
      no-wrap-n(2)
    .price
      font-size 13px
      color #999
      span
        color $color-theme
      .num
        font-size 16px
  .number
    font-size 13px
    width 40px
    margin-left 8px
    text-align right
    color red
    span
      font-size 21px
      margin-left 4px
.btns
  display flex
  justify-content space-around
  margin 0 -16px
  margin-top 40px
  li
    width 23%
    height 38px
    line-height 38px
    text-align center
    color $color-theme
    border 0.5px solid $color-theme
    border-radius 3px
    background #ebfffd
  .disabled
    color #999
    border-color #999
    background #f5f5f5
  .active
    color #d65656
    border-color #d65656
    background #ffe8e8
.hotel-list
  display flex
  width 100%
  justify-content space-between
  li
    line-height 1
    margin-right 8px
    width calc((100vw - 48px) / 3)
    .bg
      width calc((100vw - 48px) / 3)
      height 82px
      border-radius 3px
      background-size cover
      background-position center
      background-repeat no-repeat
      box-shadow 0 0 8px #d0d0d0
    .name
      font-size 15px
      color #333
      margin-top 12px
      margin-bottom 8px
      no-wrap()
    .price
      font-size 12px
      color $color-theme
    &:last-child
      margin-right 0
.guideInfoWrapper {
  border-bottom-style solid
  border-width: 1px
  border-color: #E4E4E4
  padding-bottom 15px
  margin-top 40px
  display flex
  justify-content space-between
}
</style>